<ng-container [ngSwitch]="record.type" [formGroup]="form">
  <div nz-row class="grid-row" *ngSwitchCase="'grid'" [nzGutter]="record.options.gutter">
    <div class="grid-col" *ngFor="let colItem of record.columns; index as i" nz-col [nzSpan]="colItem.span || 0">
        <app-build-blocks *ngFor="let subItem of colItem.list" 
          [readonly]="readonly"
          [desenColumn]="desenColumn"
          [viewDesenInfo]="viewDesenInfo"
          [record]="subItem"
          [disabledKeys]="disabledKeys"
          [formConfig]="formConfig"
          [form]="form"
          (previewOutput)="previewOutput.emit($event)"
          >
        </app-build-blocks>
    </div>
  </div>
  <app-design-form-batch  *ngSwitchCase="'batch'"
    [formConfig]="formConfig"
    [record]="record"
    [form]="form"
    (previewOutput)="previewOutput.emit($event)"
  >
  </app-design-form-batch>
  <nz-tabset class="grid-row" *ngSwitchCase="'tabs'"
    [nzTabBarGutter]="record.options.tabBarGutter"
    [nzType]="record.options.type"
    [nzSize]="record.options.size"
    [nzTabPosition]="record.options.tabPosition"
    [nzAnimated]="record.options.animated"
    >
    <nz-tab  *ngFor="let colItem of record.columns; index as i" 
    [nzTitle]="colItem.label">
      <div [ngStyle]="{'max-height': record.options.contentMaxHeight, 'overflow-y': 'auto' }" 
      *ngIf="record.options.contentMaxHeight != null && record.options.contentMaxHeight != -1">
        <app-build-blocks *ngFor="let subItem of colItem.list" 
        [readonly]="readonly"
        [desenColumn]="desenColumn"
        [viewDesenInfo]="viewDesenInfo"
        [record]="subItem"
        [disabledKeys]="disabledKeys"
        [formConfig]="formConfig"
        [form]="form"
        (previewOutput)="previewOutput.emit($event)"
        >
      </app-build-blocks>
      </div>
      <ng-container *ngIf="record.options.contentMaxHeight == null || record.options.contentMaxHeight == -1">
        <app-build-blocks *ngFor="let subItem of colItem.list" 
        [readonly]="readonly"
        [desenColumn]="desenColumn"
        [viewDesenInfo]="viewDesenInfo"
        [record]="subItem"
        [disabledKeys]="disabledKeys"
        [formConfig]="formConfig"
        [form]="form"
        (previewOutput)="previewOutput.emit($event)"
        >
      </app-build-blocks>
      </ng-container>
    </nz-tab>
  </nz-tabset>
  <nz-collapse *ngSwitchCase="'collapse'"
    class="grid-row" [nzAccordion]="record.options.accordion" [nzBordered]="record.options.bordered"
    [nzGhost]="record.options.ghost" [nzExpandIconPosition]="record.options.expandIconPosition">
    <nz-collapse-panel [nzActive]="true" *ngFor="let colItem of record.columns; index as i" [nzHeader]="colItem.label">
      <app-build-blocks *ngFor="let subItem of colItem.list" 
        [readonly]="readonly"
        [desenColumn]="desenColumn"
        [viewDesenInfo]="viewDesenInfo"
        [record]="subItem"
        [disabledKeys]="disabledKeys"
        [formConfig]="formConfig"
        [form]="form"
        (previewOutput)="previewOutput.emit($event)"
        >
      </app-build-blocks>
    </nz-collapse-panel>
  </nz-collapse>
  <table
    *ngSwitchCase="'table'" class="kk-table-9136076486841527" 
      [style.width]="record.options.width"
      [class.bordered]="record.options.bordered"
      [class.small]="record.options.small"
      [class.bright]="record.options.bright"
    >
    <tr *ngFor="let trItem of record.trs; index as trIndex">
      <td
        class="table-td"
        *ngFor="let tdItem of trItem.tds; index as tdIndex"
        [colSpan]="tdItem.colspan"
        [rowSpan]="tdItem.rowspan"
        [hidden]="!tdItem.colspan || !tdItem.rowspan"
      >
      <app-build-blocks *ngFor="let subItem of tdItem.list" [record]="subItem" [formConfig]="formConfig" [form]="form"
        [readonly]="readonly"
        [desenColumn]="desenColumn"
        [viewDesenInfo]="viewDesenInfo"
        [disabledKeys]="disabledKeys"
         (previewOutput)="previewOutput.emit($event)">
      </app-build-blocks>
      </td>
    </tr>
  </table>
  <nz-card *ngSwitchCase="'card'" class="grid-row"
  [nzTitle]="nzCardTitle" [nzExtra]="cardExtra"
  >
    <app-build-blocks *ngFor="let subItem of record.list" 
    [readonly]="readonly"
    [desenColumn]="desenColumn"
    [viewDesenInfo]="viewDesenInfo"
    [record]="subItem"
    [disabledKeys]="disabledKeys"
    [formConfig]="formConfig"
    [form]="form"
    (previewOutput)="previewOutput.emit($event)"
    >
  </app-build-blocks>
  </nz-card>
  <ng-template #cardExtra>
    <div *ngIf="formDesignConfig?.indicatorCard && record.key && this.form?.value[record.key]">
      得分：{{this.form?.value[record.key]}}
    </div>
  </ng-template>
  <ng-template #nzCardTitle>
    <div style="padding-right: 12px; white-space: normal;">{{record.label}}</div>
  </ng-template>
  <div *ngSwitchCase="'block'" class="grid-row">
    <app-build-blocks *ngFor="let subItem of record.list" 
    [readonly]="readonly"
    [disabledKeys]="disabledKeys"
    [desenColumn]="desenColumn"
    [viewDesenInfo]="viewDesenInfo"
    [record]="subItem"
    [formConfig]="formConfig"
    [form]="form"
    (previewOutput)="previewOutput.emit($event)"
    >
    </app-build-blocks>
  </div>
  <ng-container *ngSwitchCase="'html'">
    <div [outerHTML]="record.options.defaultValue"></div>
  </ng-container>
  <app-design-form-item *ngSwitchDefault
    [formConfig]="formConfig"
    [record]="record"
    [form]="form"
    [readonly]="readonly"
    [desenColumn]="desenColumn"
    [disabledKeys]="disabledKeys"
    [viewDesenInfo]="viewDesenInfo"
    (previewOutput)="previewOutput.emit($event)"
  >
  </app-design-form-item>
</ng-container>